<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        /* 
          
                行高（line height）
                    - 行高指的是文字占有的实际高度
                    - 可以通过line-height来设置行高
                        行高可以直接指定一个大小（px em）
                        也可以直接为行高设置一个整数
                            如果是一个整数的话，行高将会是字体的指定的倍数
                    - 行高经常还用来设置文字的行间距
                        行间距 = 行高 - 字体大小

                字体框
                    - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

                行高会在字体框的上下平均分配

                可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
        */
        *{
            padding: 0;
            margin: 0;
        }
        .box{
              border: 1px solid rebeccapurple;
              height: 60px;
              line-height: 16px; 
        }

        span{
           font-size: 16px;
        }
       
    </style>
</head>

<body>
    <div class="box">
        <span>天南地北双飞客</span>
    </div>

</html>